<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="icon" href="../img/login/favicon.ico" type="image/x-icon">
		<title>用户注册-购酒网</title>
		<link rel="stylesheet" type="text/css" href="../css/regist.css"/>
	</head>
	<body>
		<!--top-->
		<div id="top">
			<div class="top_con">
				<h1 class="logo">
					<a href="../index.html">
						<img src="../img/login/hd_logo.jpg"/>
					</a>
				</h1>
				<div class="top_right">
					<p>如您已有账户 <a href="login.html">请登录</a></p>
					<a href="#">
						<i></i>帮助
					</a>
					<a href="#">
						<i></i>在线客服
					</a>
				</div>
			</div>
		</div>
		<!--regist-main-->
		<div class="regist_con">
			<div class="form_body">
				<ul class="form_title">
					<li><a href="#"><i></i>手机注册</a></li>
					<div></div>
				</ul>
				<!--注册表-->
				<form action="" method="post" class="form_con">
					<div>
						<label for="phoneNum">手机号：</label>
						<input id="phoneNum" type="text" />
						<div class="status">
							<span class="sta_false"><span></span>请输入正确手机号</span>
							<span class="sta_true"></span>
						</div>
					</div>
					<div>
						<label for="phonePwd">设置密码：</label>
						<input id="phonePwd" placeholder="6-20个非空格字符" type="password" />
						<div class="status">
							<span class="sta_false"><span></span>请输入正确密码</span>
							<span class="sta_true"></span>
						</div>
					</div>
					<div>
						<label for="rePwd">确认密码：</label>
						<input id="rePwd" type="password" />
						<div class="status">
							<span class="sta_false"><span></span>请输入相同密码</span>
							<span class="sta_true"></span>
						</div>
					</div>
					<div>
						<label for="checkNum">验证码：</label>
						<input type="text" id="checkNum" placeholder="输入图片验证码" />
						<h3 class="img_box">
							<p id="yzm_box"></p>
							<a href="javascript:;">换一张</a>
						</h3>
					</div>
					<div>
						<label for="recheck">校验码：</label>
						<a href="javascript:;">获取校验码</a>
						<label for="recheck"></label>
						<input id="recheck" type="text" />
					</div>
					<p>点击注册，表示您同意购酒网 <a href="#">《服务协议》</a></p>
					<h2><input type="button" id="rejist_btn" value="注册"/></h2>
				</form>
			</div>
			<div class="ad">
				<a href="#">
					<img src="../img/regist/4d962d8296c54539b8f73215746f3084.jpg" alt="" />
				</a>
			</div>
		</div>
		<!--bottom-->
		<div id="bottom">
			<div class="bottom_con">
				<ul class="clearfix">
					<li><a href="#" title="关于我们">关于我们</a></li>
					<li><a href="#" title="联系我们">联系我们</a></li>
					<li><a href="#" title="人才招聘">人才招聘</a></li>
					<li><a href="#" title="隐私声明">隐私声明</a></li>
					<li><a href="#" title="帮助中心">帮助中心</a></li>
					<li><a href="#" title="友情链接">友情链接</a></li>
				</ul>
				<p>Copyright©2009-2017 gjw.com, All Rights Reserved 购酒网(上海)供应链管理有限公司 版权所有</p>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript" src="../js/gVerify.js"></script>
	<script type="text/javascript" src="../js/jquery.cookie.js"></script>
	<script type="text/javascript" src="../js/register.js"></script>
	<script type="text/javascript">
		$(function(){
			$(".form_con>div input").val("");
		})
		setInterval(function(){
			$("body").animate({"background-position-x": "+=-1px"},50);
		},50)
		setInterval(function(){
			$("body").animate({"background-position-y": "+=-1px"},50);
		},50)
		//给表单加失焦事件
		$("#phoneNum").blur(function(){
			var usn = $("#phoneNum").val();
			if(/^(1){1}\d{10}$/.test(usn)){
				$("#phoneNum").siblings(".status").find(".sta_true").css("display","block");
				$("#phoneNum").siblings(".status").find(".sta_false").css("display","none");
			}else{
				$("#phoneNum").siblings(".status").find(".sta_true").css("display","none");
				$("#phoneNum").siblings(".status").find(".sta_false").css("display","block");
			}
		})
		$("#phonePwd").blur(function(){
			var pwd = $("#phonePwd").val();
			if(/^[^\s]{6,20}$/.test(pwd)){
				$("#phonePwd").siblings(".status").find(".sta_true").css("display","block");
				$("#phonePwd").siblings(".status").find(".sta_false").css("display","none");
			}else{
				$("#phonePwd").siblings(".status").find(".sta_true").css("display","none");
				$("#phonePwd").siblings(".status").find(".sta_false").css("display","block");
			}
		})
		$("#rePwd").blur(function(){
			var pwd = $("#phonePwd").val();
			var con = $("#rePwd").val(); //确认密码
			if(pwd === con){
				$("#rePwd").siblings(".status").find(".sta_true").css("display","block");
				$("#rePwd").siblings(".status").find(".sta_false").css("display","none");
			}else{
				$("#rePwd").siblings(".status").find(".sta_true").css("display","none");
				$("#rePwd").siblings(".status").find(".sta_false").css("display","block");
			}
		})
		$("#checkNum").blur(function(){
			alert(verifyCode.validate($("#checkNum").val()));
		})
	</script>
</html>
